<template>
  <div class="lineBarChart-box">
    <slot></slot>
    <div class="lineBarChart" ref="lineBar" style="position:absolute; z-index: 1!important;">
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {ref, watch, defineProps} from 'vue'

let chart = null
const props = defineProps({
  options: {
    type: Object,
    default: () => {
    }
  }
})
const init = () => {
  if (chart) {

    chart.clear()
    chart.setOption(props.options)
  } else {
    if (props.options) {

      chart = echarts.init(lineBar.value)
      chart.setOption(props.options)
    }
  }

}
const lineBar = ref(null)
watch(() => props.options, (value) => {
  init()
}, {deep: true,})


</script>

<style scoped>
.lineBarChart {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>